Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

refactor(platform): Refactor project components #626

Merged
merged 3 commits into from
Jan 13, 2025
Merged

refactor(platform): Refactor project components #626

merged 3 commits into from
Jan 13, 2025

Conversation

rajdip-b
Copy link
Member

@rajdip-b rajdip-b commented Jan 13, 2025 •
edited by codiumai-pr-agent-free bot
Loading

PR Type

Enhancement, Bug fix

Description

  • Refactored project creation and editing components for modularity.

  • Introduced CreateProjectDialogue and EditProjectSheet components.

  • Replaced local storage workspace management with Jotai state management.

  • Improved error handling and user feedback with toast notifications.

Changes walkthrough 📝

Relevant files
Enhancement
7 files
page.tsx
Refactored project dashboard to use modular components     
+32/-347
index.tsx
Added new modular component for project creation                 
+283/-0 
index.tsx
Added new modular component for project editing                   
+70/-0   
index.tsx
Updated project card to integrate with new edit sheet       
+6/-8     
combobox.tsx
Refactored workspace handling to use Jotai state                 
+11/-12 
index.ts
Added Jotai atoms for workspace and project state management
 +6/-0     
workspace.ts
Reintroduced workspace utility functions for local storage management
 [link]   
Miscellaneous
1 files
page.tsx
Removed unused import for cleaner code                                     
+0/-1     
Formatting
1 files
index.tsx
Minor formatting cleanup in sidebar component                       
+0/-1     

💡 PR-Agent usage: Comment /help "your question" on any pull request to receive relevant information

@rajdip-b rajdip-b requested a review from kriptonian1 as a code owner January 13, 2025 04:41
@codiumai-pr-agent-free CodiumAI PR-Agent (Free)
Copy link
Contributor

PR Reviewer Guide 🔍

Here are some key observations to aid the review process:

⏱️ Estimated effort to review: 3 🔵🔵🔵⚪⚪
🧪 No relevant tests
🔒 No security concerns identified
⚡ Recommended focus areas for review

Error Handling

The createNewProject function should handle validation of required fields before making the API call. Currently there's no validation for required fields like project name and environment name.

const createNewProject = useCallback(async () => {
  if (currentWorkspace) {
    newProjectData.workspaceSlug = currentWorkspace.slug

    const { data, error, success } =
      await ControllerInstance.getInstance().projectController.createProject(
        newProjectData,
        {}
      )

    if (success && data) {
      setProjects([
        ...projects,
        {
          ...data,
          environmentCount: newProjectData.environments
            ? newProjectData.environments.length
            : 0,
          secretCount: 0,
          variableCount: 0
        }
      ])
    } else {
      toast.error(
        'Something went wrong while creating project. Check console for more info.'
      )
      // eslint-disable-next-line no-console -- we need to log the error
      console.error(error)
    }

    setIsCreateProjectDialogOpen(false)
  } else {
    toast.error('No workspace selected')
  }
}, [
Missing Implementation

The edit project form is not fully implemented - it renders the form fields but lacks the logic to handle form submission and API integration to update the project.

<div className="grid gap-4 py-4">
  <div className="flex flex-col items-start gap-4">
    <Label className="text-right" htmlFor="name">
      Project Name
    </Label>
    <Input className="col-span-3" id="name" />
  </div>
  <div className="flex flex-col items-start gap-4">
    <Label className="text-right" htmlFor="name">
      Project description
    </Label>
    <Input className="col-span-3" id="name" />
  </div>

  <div className="flex items-center justify-between">
    <Label className="w-[10rem] text-left" htmlFor="name">
      Do you want us to store the private key?
    </Label>
    <div className="flex gap-1 text-sm">
      <div>No</div>
      <Switch />
      <div>Yes</div>
    </div>
  </div>
</div>
State Management

The Switch component for storing private key is not connected to state management - its value is not being tracked or used when creating the project.

<Switch className="h-[1.25rem] w-[2.25rem] " />

@codiumai-pr-agent-free CodiumAI PR-Agent (Free)
Copy link
Contributor

codiumai-pr-agent-free bot commented Jan 13, 2025 •
edited
Loading

PR Code Suggestions ✨

Explore these optional code suggestions:

CategorySuggestion                                                                                                                                    Score
Possible issue
Implement form state management and validation for edit functionality

Add form state management and validation for the edit project form. Currently the
form inputs are not connected to any state and the save button has no
implementation.

apps/platform/src/components/dashboard/project/editProjectSheet/index.tsx [40-64]

-<Input className="col-span-3" id="name" />
+<Input 
+  className="col-span-3" 
+  id="name"
+  value={editProjectData.name}
+  onChange={(e) => setEditProjectData(prev => ({...prev, name: e.target.value}))}
+/>
 ...
-<Button type="submit" variant="secondary">
+<Button 
+  type="submit" 
+  variant="secondary"
+  onClick={handleSaveChanges}
+>
   Save changes
 </Button>
Suggestion importance[1-10]: 9

Why: The edit project form lacks state management and validation, making it completely non-functional. This is a critical issue as users cannot modify project details, impacting core application functionality.

9
✅ Connect toggle switch component to state management to make it functional
Suggestion Impact:The commit implemented the suggestion by adding state management to the Switch component using newProjectData.storePrivateKey and onCheckedChange handler

code diff:

-                <Switch className="h-[1.25rem] w-[2.25rem] " />
+                <Switch
+                  checked={newProjectData.storePrivateKey}
+                  className="h-[1.25rem] w-[2.25rem]"
+                  onCheckedChange={(checked) => {
+                    setNewProjectData((prev) => ({
+                      ...prev,
+                      storePrivateKey: checked
+                    }))
+                  }}
+                />

Add validation for the storePrivateKey state in the Switch component. Currently the
Switch is not connected to any state management, making it non-functional.

apps/platform/src/components/dashboard/project/createProjectDialogue/index.tsx [266-268]

 <div className="p-[0.125rem]">
-  <Switch className="h-[1.25rem] w-[2.25rem] " />
+  <Switch 
+    className="h-[1.25rem] w-[2.25rem]"
+    checked={newProjectData.storePrivateKey}
+    onCheckedChange={(checked) => {
+      setNewProjectData((prev) => ({
+        ...prev,
+        storePrivateKey: checked
+      }))
+    }}
+  />
 </div>
  • Apply this suggestion
Suggestion importance[1-10]: 8

Why: The switch component is currently non-functional as it lacks state management, preventing users from toggling the private key storage option. This is an important feature that directly affects application functionality.

8

@rajdip-b rajdip-b merged commit 5b70805 into develop Jan 13, 2025
4 checks passed
@rajdip-b rajdip-b deleted the refactor/platform-project branch January 13, 2025 05:25
bansal-harsh-2504 pushed a commit to bansal-harsh-2504/keyshade that referenced this pull request Jan 17, 2025
@rajdip-b @bansal-harsh-2504
refactor(platform): Refactor project components (keyshade-xyz#626)
7024516
rajdip-b pushed a commit that referenced this pull request Jan 23, 2025
@semantic-release-bot
chore(release): 2.9.0 [skip ci]
8bfbaf2 
## [2.9.0](v2.8.0...v2.9.0) (2025-01-23)

### 🚀 Features

* **api-client:** Get all workspace invitation ([#619](#619)) ([8a23850](8a23850))
* **api,cli,api-client,schema:** Enhance permissions to allow filtering by environments through project roles ([#599](#599)) ([030b539](030b539))
* **api:** Add `ADMIN` authority for API keys ([#609](#609)) ([fb6aba7](fb6aba7))
* **api:** Add email template for inviting user to workspace ([#480](#480)) ([f5ddf7a](f5ddf7a))
* **api:** Add email template for sending OTP to the user ([#582](#582)) ([cb6bbcb](cb6bbcb))
* **api:** Add endpoint to fetch all workspace invitations for a user ([#586](#586)) ([d45417a](d45417a))
* **api:** Add logout endpoint to clear token cookie ([#581](#581)) ([27f81ba](27f81ba))
* **api:** Add slack integration ([#531](#531)) ([fe124d8](fe124d8))
* **cli:** Add CLI command to check version flag using `--version` or `-v` ([#650](#650)) ([31b5efe](31b5efe))
* **cli:** Add functionality to operate on Workspace Membership ([#589](#589)) ([0fde62b](0fde62b))
* **cli:** Add import sub commmand for project. ([#594](#594)) ([9896f27](9896f27))
* **cli:** Add List-invitation command ([#633](#633)) ([874f8c2](874f8c2))
* **cli:** Added keyshade command to cli ([cf260ae](cf260ae))
* **cli:** Api health probe ([#645](#645)) ([dd854f4](dd854f4))
* **cli:** Create basic README.md ([a1b74e9](a1b74e9))
* **cli:** Log publicKey, privacyKey, & accessLevel after project creation ([#623](#623)) ([5d5b329](5d5b329))
* **cli:** Supports to specify environment(s) and its optional description ([#634](#634)) ([62083b1](62083b1))
* **cli:** update README with feature and installation ([#644](#644)) ([a4d2a6a](a4d2a6a))
* **platform:** Add a new [secure] and added loader on project screen ([#603](#603)) ([c3a08cc](c3a08cc))
* **platform:** Add new variables to a project ([#593](#593)) ([d6c6252](d6c6252))
* **platform:** Delete variable from a project ([#600](#600)) ([e64a738](e64a738))
* **platform:** Edit existing variables in a project ([#602](#602)) ([bb48f6c](bb48f6c))
* **platform:** Show all the existing variables inside a project ([#591](#591)) ([5276bb8](5276bb8))
* **platofrm:** Added online/offline status detection in the platform ([#585](#585)) ([89aa84f](89aa84f))
* **schema:** Add workspace invitation schema ([#612](#612)) ([1a5721b](1a5721b))
* **web:** Add Google Analytics integration ([#649](#649)) ([397d6da](397d6da))

### 🐛 Bug Fixes

* **api:** Empty name `""` accepted as a valid name while creating environments ([#583](#583)) ([a33f4b5](a33f4b5))
* **api:** Enable global project access ([#580](#580)) ([b3a0309](b3a0309))
* **api:** Update build command ([0ddfa59](0ddfa59))
* **cli:** Add keywords for improved package discoverability ([#641](#641)) ([57ce10b](57ce10b))
* **cli:** Check for .keyshade dir if profile isn't found ([#636](#636)) ([a69665d](a69665d))
* **cli:** Create project --store-private-key option default value removed ([#638](#638)) ([20f16c6](20f16c6))
* **cli:** Fixed binary path in package.json ([e531af0](e531af0))
* **cli:** Fixed binary path in package.json ([81d674d](81d674d))
* **cli:** Incorrect message on listing projects ([#624](#624)) ([eeffa42](eeffa42))
* **cli:** Module errors ([d3432c5](d3432c5))
* **cli:** Module errors ([a639065](a639065))
* **cli:** Module errors ([a7742b1](a7742b1))
* **cli:** Module errors ([e96300e](e96300e))
* **cli:** Profile name now can use - and _ and updated error message ([#639](#639)) ([00dd66a](00dd66a))
* **cli:** Prompt users for all values if no option set and show default values ([#640](#640)) ([fe862ab](fe862ab))
* **docker:** Update build script ([40ef3e2](40ef3e2))
* **platform:** Check if `Env. Name` is left empty ([#646](#646)) ([5f3fac8](5f3fac8))
* **platform:** Clickable Workspaces combobox options ([#630](#630)) ([acc96f7](acc96f7))
* **platform:** Optimized user update request body ([#605](#605)) ([ee1adf0](ee1adf0))
* **platform:** Type error in navbar ([8199de8](8199de8))
* **README:** Update Discord badge ([6f9382e](6f9382e))
* **schema:** Add versions field to project [secure]s and variables response ([#590](#590)) ([755ea46](755ea46))

### 📚 Documentation

* **cli:** Update changelog to include missed out changes ([8910c5c](8910c5c))
* Updated alignment of pictures in API Testing page ([5d69223](5d69223))
* Updated alignment of pictures in API Testing page ([e31eeca](e31eeca))

### 🔧 Miscellaneous Chores

* Add Sentry and update CI ([#653](#653)) ([ca96862](ca96862))
* **ci:** Add CLI deployment script ([51de9d1](51de9d1))
* **ci:** Add internal package dependencies to existing workflows ([#592](#592)) ([a9fc39e](a9fc39e))
* **ci:** Add scope ([8ef89a8](8ef89a8))
* **ci:** Bug fix in workflow ([d583a46](d583a46))
* **ci:** Bug fix in workflow ([eb9d60f](eb9d60f))
* **ci:** Bump version to 2.2.0 ([951bd14](951bd14))
* **ci:** Deploy DB migrations ([ea1beed](ea1beed))
* **ci:** Fixed chaining and scripts ([6a009eb](6a009eb))
* **ci:** Fixed environment name ([172c348](172c348))
* **ci:** Fixed errors ([f28e3b5](f28e3b5))
* **ci:** Minor fixes ([c7f05a0](c7f05a0))
* **ci:** Push docker images of platform and API to ACR ([5f79dd7](5f79dd7))
* **ci:** Remove npm ci ([3d45a4c](3d45a4c))
* **ci:** Remove pnpm cache ([f45970c](f45970c))
* **ci:** Update app redeployment ([18cf765](18cf765))
* **ci:** Update web deployment to push to ACR ([26d4bed](26d4bed))
* **cli:** Bumped CLI to v2.4.0 ([09efcd9](09efcd9))
* **cli:** Rearranged dependency ([b6e344d](b6e344d))
* **cli:** Removed changeset ([6c436de](6c436de))
* **cli:** Update package name ([23552a1](23552a1))
* **cli:** Update package name ([480cf54](480cf54))
* **cli:** Update package.json ([871679a](871679a))
* **cli:** Updated build scripts ([2e2b42d](2e2b42d))
* **docker:** Update port of platform docker build ([c79d886](c79d886))
* Housekeeping ([2ed31c0](2ed31c0))
* **platoform:** Swapped all legacy API calls with `@keyshade/api-client` ([#584](#584)) ([c600db7](c600db7))
* Removed .postman folder ([4b2b675](4b2b675))
* Reverted back registry ([1699a89](1699a89))
* **schema:** Add describe blocks in tests for each kind of schema ([#577](#577)) ([c0763f3](c0763f3))
* Update npmrc ([9f7f495](9f7f495))
* Update pipelines; fixed api docker ([3f36a17](3f36a17))
* Update platform build command ([83a1851](83a1851))
* **web:** Fix CI ([d1bc740](d1bc740))
* **web:** Update dockerfile and ci to include google analytics env ([f2df4f4](f2df4f4))

### 🔨 Code Refactoring

* **cli:** Replace arguments with options ([#615](#615)) ([498f44e](498f44e))
* **platform:** Optimized codebase ([#629](#629)) ([d411081](d411081))
* **platform:** Refactor project components ([#626](#626)) ([5b70805](5b70805))
* **web:** Changed the text in the hero section of the web application ([#579](#579)) ([a92925f](a92925f))
@rajdip-b
Copy link
Member Author

🎉 This PR is included in version 2.9.0 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@kriptonian1 kriptonian1 Awaiting requested review from kriptonian1 kriptonian1 is a code owner

Assignees
No one assigned
Labels
released on @develop Review effort [1-5]: 3
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
1 participant
@rajdip-b